{include file="inc/header_index_mui.html"}
<link rel="stylesheet" href="css/rank_ul.css" />
<link rel="stylesheet" href="css/shop_tc.css" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>

{include file="inc/footer_menu_mui.html"}



		<div class="mui-content">
			<div class="re"><img  class="aui-col-10 fix aui-light-top aui-zindex-9"  src="image/light.png" alt="" /></div>
			
			<div class="mui-slider">
			    <div class="mui-slider-group mui-slider-loop" style="height:160px;">
			    <!--支持循环，需要重复图片节点-->
				    {if $data.advs}
					
					{foreach from="$data.advs" item="adv"}
						<div class="mui-slider-item mui-slider-item-duplicate"><a href="{$adv.url}"><img src="{$adv.img}" /></a></div>
						<div class="mui-slider-item"><a href="{$adv.url}"><img src="{$adv.img}" /></a></div>
					{/foreach}

					{/if}
				<!--支持循环，需要重复图片节点-->
				   
			    </div>
		   </div>
		   <!-------轮播图-------->
		   
		    <div class="mui-row aui-pad-t-10">
		    	<div class="mui-col-sm-4 mui-col-xs-4 mui-text-center ">
		    		<img class="aui-col-8" style="border-right:1px solid #000;padding-right: 20px;" src="image/index_jiebao.png" alt="" />
		    	</div>
		    	<div class="mui-col-sm-8 mui-col-xs-8 hidden">
		    		<div id="lunbo_content" class="hidden "   style="height: 32px;">
						<div class="re hidden" id="lunbo" style="top: 1px;">
		    			{if $data.newest_lottery_list}
						{foreach from=$data.newest_lottery_list item=lottery_unit}
						<p class="aui-color-red ">&nbsp;恭喜&nbsp;{$lottery_unit.user_name}&nbsp;获得{$lottery_unit.name}&nbsp;</p>
						{/foreach}
						{/if}
						</div>
		    		</div>
		    	</div>
		    </div>
		    <!--广播滚动-->

			<!--选项开切换开始-->
			<div >
				<ul id="tab" class="mui-row aui-mar-t-10 mui-text-center aui-background-white aui-mar-b-5">
					<li class="mui-col-sm-3 mui-col-xs-3 aui-pad-5 aui-border-radius mui-btn-primary">2人赛</li>
					<li class="mui-col-sm-3 mui-col-xs-3 aui-pad-5 aui-border-radius">4人赛</li>
					<li class="mui-col-sm-3 mui-col-xs-3 aui-pad-5 aui-border-radius">8人赛</li>
					<li class="mui-col-sm-3 mui-col-xs-3 aui-pad-5 aui-border-radius">16人赛</li>
				</ul>
				<!--人赛导航-->
				<div class="sai ">	
					<div class="mui-row aui-border-t">
						<?if($this->_var['data']['deal_list']):?>
						<?foreach($this->_var['data']['deal_list'] as $k=>$v):?>
						<div class="mui-col-sm-6 mui-col-xs-6 aui-border-ri">
							<img class="aui-col-96" src="<?=$v['icon']?>" alt="" />
							<div class="mui-row">
								<div class="mui-col-sm-12 mui-col-xs-12 mui-text-center ">
									<h3><?=$v['name']?></h3></div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right">
									<h5 class="aui-color-gray re rele fl">人均 :&nbsp;<h5 class="fr aui-color-red "><?=$v['current_price']/2?>钱</h5></h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right " style="margin-top: -10px;">
									<h4 class="aui-color-red fr re reri retop">￥<?=$v['current_price']?>钱</h4>
								</div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 ">
									<img class="aui-col-2 fl re rele" src="image/renshu.png" />
									<h5 class="fl re rele">&nbsp;&nbsp;&nbsp;&nbsp;250人</h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center" onclick="canyu('2','<?=$v['icon']?>','<?=$v['name']?>','<?=$v['description']?>',<?=$v['current_price']/2?>,<?=$v['id']?>)">
									<h5 class="aui-border-radius-15 aui-color-black aui-col-8 re rele btn" style="background: #f6db25;">立即参与</h5>
								</div>
							</div>
						</div>
						<?endforeach;?>
						<?endif;?>
					</div>

				</div>
				<!--2人赛结束-->
				
				<div class="sai none">
					<div class="mui-row aui-border-t">
						<?if($this->_var['data']['deal_list']):?>
						<?foreach($this->_var['data']['deal_list'] as $k=>$v):?>
						<div class="mui-col-sm-6 mui-col-xs-6 aui-border-ri">
							<img class="aui-col-96" src="<?=$v['icon']?>" alt="" />
							<div class="mui-row">
								<div class="mui-col-sm-12 mui-col-xs-12 mui-text-center ">
									<h3><?=$v['name']?></h3></div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right">
									<h5 class="aui-color-gray re rele fl">人均 :&nbsp;<h5 class="fr aui-color-red "><?=$v['current_price']/4?>钱</h5></h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right " style="margin-top: -10px;">
									<h4 class="aui-color-red fr re reri retop">￥<?=$v['current_price']?>钱</h4>
								</div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 ">
									<img class="aui-col-2 fl re rele" src="image/renshu.png" />
									<h5 class="fl re rele">&nbsp;&nbsp;&nbsp;&nbsp;450人</h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center" onclick="canyu('4','<?=$v['icon']?>','<?=$v['name']?>','<?=$v['description']?>',<?=$v['current_price']/4?>,<?=$v['id']?>)">
									<h5 class="aui-border-radius-15 aui-color-black aui-col-8 re rele btn" style="background: #f6db25;">立即参与</h5>
								</div>
							</div>
						</div>
						<?endforeach;?>
						<?endif;?>
					</div>

				</div>
				<!--4人赛结束-->
				
				<div class="sai none">
					<div class="mui-row aui-border-t">
						<?if($this->_var['data']['deal_list']):?>
						<?foreach($this->_var['data']['deal_list'] as $k=>$v):?>
						<div class="mui-col-sm-6 mui-col-xs-6 aui-border-ri">
							<img class="aui-col-96" src="<?=$v['icon']?>" alt="" />
							<div class="mui-row">
								<div class="mui-col-sm-12 mui-col-xs-12 mui-text-center ">
									<h3><?=$v['name']?></h3></div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right">
									<h5 class="aui-color-gray re rele fl">人均 :&nbsp;<h5 class="fr aui-color-red "><?=$v['current_price']/8?>钱</h5></h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right " style="margin-top: -10px;">
									<h4 class="aui-color-red fr re reri retop">￥<?=$v['current_price']?>钱</h4>
								</div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 ">
									<img class="aui-col-2 fl re rele" src="image/renshu.png" />
									<h5 class="fl re rele">&nbsp;&nbsp;&nbsp;&nbsp;850人</h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center" onclick="canyu('8','<?=$v['icon']?>','<?=$v['name']?>','<?=$v['description']?>',<?=$v['current_price']/8?>,<?=$v['id']?>)">
									<h5 class="aui-border-radius-15 aui-color-black aui-col-8 re rele btn" style="background: #f6db25;">立即参与</h5>
								</div>
							</div>
						</div>
						<?endforeach;?>
						<?endif;?>
					</div>

				</div>
				<!--8人赛结束-->
				
				<div class="sai none">
					<div class="mui-row aui-border-t">
						<?if($this->_var['data']['deal_list']):?>
						<?foreach($this->_var['data']['deal_list'] as $k=>$v):?>
						<div class="mui-col-sm-6 mui-col-xs-6 aui-border-ri">
							<img class="aui-col-96" src="<?=$v['icon']?>" alt="" />
							<div class="mui-row">
								<div class="mui-col-sm-12 mui-col-xs-12 mui-text-center ">
									<h3><?=$v['name']?></h3></div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right">
									<h5 class="aui-color-gray re rele fl">人均 :&nbsp;<h5 class="fr aui-color-red "><?=$v['current_price']/16?>钱</h5></h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-right " style="margin-top: -10px;">
									<h4 class="aui-color-red fr re reri retop">￥<?=$v['current_price']?>钱</h4>
								</div>
							</div>
							<div class="mui-row">
								<div class="mui-col-sm-6 mui-col-xs-6 ">
									<img class="aui-col-2 fl re rele" src="image/renshu.png" />
									<h5 class="fl re rele">&nbsp;&nbsp;&nbsp;&nbsp;850人</h5>
								</div>
								<div class="mui-col-sm-6 mui-col-xs-6 mui-text-center" onclick="canyu('16','<?=$v['icon']?>','<?=$v['name']?>','<?=$v['description']?>',<?=$v['current_price']/16?>,<?=$v['id']?>)">
									<h5 class="aui-border-radius-15 aui-color-black aui-col-8 re rele btn" style="background: #f6db25;">立即参与</h5>
								</div>
							</div>
						</div>
						<?endforeach;?>
						<?endif;?>
					</div>

				</div>
				<!--16人赛结束-->
				
				<div class="alert_bg block">
					<div class="alert_tc aui-col-8 re aui-pad-15 mui-text-center">
						<img class="ab jiu" id="deal_icon" src="image/jiu_t.png" alt="" width="100px" />
						<h3 class="aui-pad-t-10 aui-color-white"><b id="deal_name">加载中</b></h3>
						<h4 class="aui-color-white" id="numtxt">null人赛</h4>
						<div class="aui-mar-15 hidden" id="pvp">
							<div class="fl aui-color-white" style="margin-left: 20px;font: 16px/20px '微软雅黑'">1v1 <input type="radio" name="pvp" id="" value="2" checked></div>
							<div class="fl aui-color-white" style="margin-left: 20px;font: 16px/20px '微软雅黑'">2v2 <input type="radio" name="pvp" id="" value="4"></div>
							<div class="fl aui-color-white" style="margin-left: 20px;font: 16px/20px '微软雅黑'">4v4 <input type="radio" name="pvp" id="" value="8"></div>
						</div>
						<div class="aui-background-white aui-mar-t-15 aui-border-radius hidden aui-mar-t-20" style="height:100px;">
							<p class="aui-pad-10 mui-text-left hidden" id="deal_description">加载中</p>
						</div>

						<div class="mui-row aui-mar-t-15">
							<div class="mui-col-sm-4 mui-col-xs-4 "><button type="button" class="cancel mui-btn mui-btn-danger aui-border-radius-30 aui-col-9">取消</button></div>
							<div class="mui-col-sm-4 mui-col-xs-4 "><button type="button" class="quitepipei mui-btn mui-btn-blue aui-border-radius-30 aui-col-9" onclick="go(1)"><a class="aui-color-white" href="#">快速匹配</a></button></div>
							<div class="mui-col-sm-4 mui-col-xs-4 "><button type="button" class="mui-btn mui-btn-warning aui-border-radius-30 aui-col-9" onclick="go(0)"><a class="aui-color-white" href="#">创建房间</a></button></div>
						</div>
					</div>
				</div>
				<!-------弹窗---------->
				<div class="alert-lg fix retop mui-text-center">
					<div id="pipei" class="ab  aui-col-9 alert-lg-blue mui-text-center">
						<h1 class="aui-color-white"><strong>宝藏争夺战</strong></h1>
						<div class="re aui-col-9 aui-background-white alert-lg-white mui-text-center">
							<img class="aui-col-2 aui-mar-t-20" src="images/pp_donghua.gif" alt="">
							<h2><strong>正在匹配...</strong> <img class="aui-col-1" src="images/shuaxin.gif" alt=""> </h2>
						</div>
						<h1 class="aui-color-white">满 <span id="numtxt2">null</span> 人开赛</h1>
						<h1 class="aui-color-white">已报名 <span id="bm_num">null</span> 人，还差 <span id="cha_num">null</span> 人</h1>
						<div class="quxiao mui-row ab  aui-col-10 mui-text-center">
							<div  class="mui-col-sm-3 mui-col-xs-3" ></div>
							<div class="mui-col-sm-6 mui-col-xs-6 quxiao ">
								<button type="button" class="cancel mui-btn mui-btn-danger aui-col-6 aui-border-radius-30" onclick="close_ws()">取消</button>
							</div>
						</div>
					</div>
				</div>
				<!--匹配动画-->
			</div>
		</div>
		<input type="hidden" value="" id="buy_money" />
		<input type="hidden" value="" id="game_num" />
		<input type="hidden" value="" id="deal_id" />
		<input type="hidden" value="1" id="isTrue" />
		<script src="js/lunbo.js"></script>
		<script src="js/baozang_sai.js"></script>
		<script>
		function canyu(str0,str1,str2,str3,str4,str5){
			$("#lbjp").hide();
			$("#numtxt").html(str0+'人赛');
			$("#numtxt2").html(str0);
			$("#deal_icon").attr('src',str1);
			$("#deal_name").html(str2);
			$("#deal_description").html(str3);
			
			$("#buy_money").val(str4);
			$("#game_num").val(str0);
			$("#deal_id").val(str5);
			if(str0=='2'){
				$("#pvp").show();
			}else{
				$("#pvp").hide();
			}
		}
		function go(type){//0创建房间 1快速匹配
			if($("#buy_money").val()*1>{$data.user_info.money}){
				alert('积分不足，无法开始游戏');
			}else{
				var isTrue = $("#isTrue").val();
				var game_num=$("#game_num").val();
				var deal_id=$("#deal_id").val();
				if(isTrue=="1") {
					if(type==0){
						//跳转到监听创建房间玩家信息
						$("#isTrue").val("0");
						var join_group_cj='cj'+deal_id+"-"+game_num+"-"+{$data.user_info.id};
						window.location.href='index.php?ctl=game&act=join&group_name='+join_group_cj+'&deal_id='+deal_id+'&game_num='+game_num;
					}else{
						//监听快速匹配玩家信息
						var join_group=deal_id+"-"+game_num+"-"+{$data.user_info.id};
						init(join_group);
					}
				}

			}
		}
		</script>
<script>
var ws;
function init(join_group) {
	var host = "ws://47.104.8.67:8282";
	try {
		ws = new WebSocket(host);
		ws.onopen = function(){
			console.log('连接成功');
			ws.send("login:"+{$data.user_info.id});
			console.log('发送登陆数据完毕');
			ws.send("join_group:"+join_group);//join_group:deal_id-game_num-userid
			console.log('join_group通知完毕');
		};
		ws.onmessage = function (e) {
			//快速匹配监听 join_group-2
			if(e.data.indexOf("join_group")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#bm_num").html(n[1]);
				$("#cha_num").html($("#numtxt2").html()-n[1]);
			}
			//监听退出事件 out_group-2
			if(e.data.indexOf("out_group")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#bm_num").html(n[1]);
				$("#cha_num").html($("#numtxt2").html()-n[1]);
			}
			//监听人满开车
			if(e.data.indexOf("group_ok")>=0){
				console.log('开车啦');
				var n=e.data.split("-");
				var oneuser=n[1].split(",");
				if(oneuser[0]=={$data.user_info.id}){
					var deal_id =$("#deal_id").val();
					var game_num=$("#game_num").val();
					$.ajax({
						url: 'index.php?ctl=baozang&act=goumai2',
						type: 'POST',
						data: 'deal_id=' + deal_id + '&game_num=' + game_num + '&type=1&uids=' + n[1] +'&t=' + Math.random(),
						dataType: "json",
						success: function (data) {
							console.log(data);
							if(data.status=="1"){
								ws.send("doing:"+deal_id+"-"+game_num+"-"+data.deal_id);//发车成功 doing:deal_id-game_num-deal_id
							}else{
								alert(data.info);
							}
						},
						error: function () {
							//alert("系统错误，请联系管理员");
						}
					});				
				}
			}
			//监听发车成功
			if(e.data.indexOf("doing")>=0){
				var n=e.data.split("-");
				window.location.href='index.php?ctl=game&act=doing&deal_id='+n[1];
			}
			console.log('监听消息:'+e.data);
		};
		ws.onclose = function (msg) {
			console.log('关闭连接');
		};
	}
	catch (ex) {
		console.log(ex);
	}
}

function send(msg) {
	try { 
		ws.send(msg); 
	} catch (ex) { 
		console.log(ex);
	}
}
//刷新或关闭
window.onbeforeunload = function () {
	try {
		//监听异常退出事件
		var game_num=$("#game_num").val();
		var deal_id=$("#deal_id").val();
		ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
};
//手动关闭
function close_ws(){
	try {
		//监听点击取消事件
		var game_num=$("#game_num").val();
		var deal_id=$("#deal_id").val();
		ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
}
</script>

	</body>
</html>